<template>

  <!--grid-template-rows: repeat(2, 1fr);-->
  <div class="settings">
    <h3 class="heading">系统设置</h3>
    <ul class="setting-list"
        :style="{gridTemplateRows: 'repeat('+rows+', 1fr)'}">
      <setting-cell v-for="(setting,index) in globalSettings"
                    :key="index+'setting'"
                    :setting="setting"
      ></setting-cell>
    </ul>
  </div>
</template>

<script>
import SettingCell from "@/components/common/SettingCell";
import {mapState} from "vuex";

export default {
  name: "Setting",
  components: {SettingCell},
  computed: {
    ...mapState(['globalSettings']),
    rows() {
      let len = Object.keys(this.globalSettings).length / 2;
      return Math.ceil(len);
    }
  },
  mounted() {
  }
}
</script>

<style lang="less">
.settings {

  margin-top: 25px;
  position: relative;
  padding: 0 15px;
  border: 1px solid transparent;

  .heading {
    opacity: 1;
    padding: 0 10px 0 10px;
    font-weight: 600;
    font-size: 18px;
  }

  .setting-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15px;
    row-gap: 10px;
    padding: 0;
    margin-top: 10px;
    list-style-type: none;
  }

}

</style>